<template>
 <div class="Home">
    <el-container class="app-wrapper" >
      <!-- 头部 -->
      <el-header height="50px" v-show="headerShow">
        <navbar></navbar>
      </el-header>
      <span v-show="!showOrnottwo" >
          <!-- 缩小 放大 返回 -->
          <div id="action">
            <span v-show="smallShow" @click="smClick(1)" class="iconfont icon-suoxiao styleac1"></span>
            <span v-show="bigShow" @click="bgClick(2)" class="iconfont icon-fangda styleac2"></span>
          </div>
          <!-- 左侧 -->
          <el-aside width="180px" id="aside">
            <sidebar></sidebar>
          </el-aside>
          <!-- 右侧 -->
          <div v-if="!showOrnottwo">
            <router-view/>
          </div>
          <!-- 3D -->
          <el-main id="elmain">
            <maincont></maincont>
          </el-main>
      </span>
      <!-- 加载页面 -->
      <div class="lodingClass" v-show="showOrnottwo">
        <div class="loDiv">
          <img src="../../assets/img/loading.gif" alt="">
          <el-progress class="loProgre" :text-inside="true" :stroke-width="18" :percentage="(this.$store.state.threeD.loding.fileNumIndex/this.$store.state.threeD.loding.fileSum)*100" color="rgba(37, 220, 252, 1)"></el-progress>
          <span v-if="!Number.isNaN(reduice)" class="fontprecent">{{reduice}}%</span><!-- -->
          <span class="detaillo">
            <span>总文件：</span>
            <span>{{this.$store.state.threeD.loding.fileSum}}个&emsp;</span>
            <span>正在加载第：</span>
            <span>{{this.$store.state.threeD.loding.fileNumIndex}}个</span>
          </span>
        </div>
      </div>
    </el-container>
 </div>
</template>
<script>
import Navbar from "./child/Navbar";
import sidebar from "./child/sidebar";
import maincont from "./maincont/maincont";
import '../../../static/libs/BIM.js'
export default {
  name: "Home",
  data() {
    return {
      headerShow: true,
      smallShow: false,
      bigShow: true,
      numcontrol:0,
    };
  },
  computed: {
    reduice(){
      // console.log(document.cookie);
      return Number(((this.$store.state.threeD.loding.fileNumIndex/this.$store.state.threeD.loding.fileSum)*100).toFixed(0))
    },
    showOrnottwo(){
      return (((this.$store.state.threeD.loding.fileNumIndex/this.$store.state.threeD.loding.fileSum)*100).toFixed(0) == 100) ? false : true
    }
  },
  components: {
    Navbar,
    sidebar,
    maincont
  },
  methods: {
    smClick() {
      this.smallShow = false;
      this.bigShow = true;
      this.headerShow = true;
    },
    bgClick() {
      this.bigShow = false;
      this.smallShow = true;
      this.headerShow = false;
    }
  }
};
</script>

 <style lang="scss" scoped>
.Home {
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}
$container_bg_dark: #262626;
.app-wrapper {
  width: 100%;
  height: 100%;
  position: relative;
  #action {
    position: absolute;
    right: 1%;
    top: 50px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    z-index: 1;
    .styleac1 {
      color: white;
      position: absolute;
      font-size: 0.35rem;
      left: -7px;
    }
    .styleac2 {
      color: white;
      position: absolute;
      font-size: 0.3rem;
      left: 3px;
    }
  }
  .el-aside {
    height: 100%;
    position: absolute;
    left: 30px;
  }
  .el-header {
    position: fixed;
    height: 50px;
    background: rgba($color: $container_bg_dark, $alpha: 1);
    color: #fff;
    width: 100%;
    z-index: 1;
  }
  .el-footer {
    background: $container_bg_dark;
    color: #666;
  }
}
.lodingClass{
  width: 100%;
  height:100%;
  background-color: #0f1217;
  position: relative;
  .loDiv{
    position: absolute;
    top: calc(100%/2 - 300px/2);
    left:calc(100%/2 - 240px/2);
    width: 240px;
    height: 300px;
    text-align: center;
    img{
      width: 120px;
    }
    .loProgre{
      width: 100%;
      height: 18px;
      position: relative;
      top: -35px;
    }
    .fontprecent{
      color: white;
      font-size: 25px;
      display: block;
      position: relative;
      top: 50px;
    }
    .detaillo{
      font-size: 12px;
      color: white;
      position: relative;
      top: -24px;
    }
  }
}
</style>
